import { setDatas } from '../../../_resource/common/modules/JiessTable/utils.js';
import { initExecute } from '../../../_resource/common/utils/index.js';
import { _ProTable } from '../../../config.js';
export default (hook, { ref, Table, TableColumn, Loading }) => {
	return {
		isJiess: true,
		name: 'ProTable',
		// primaryKey无需指定默认值
		setup({ midder, update, primaryKey, emptyFill = '-' }) {
			const { $ref, $jiess, $reactive, $computed, $watchEffect } = hook.$m;
			// 头部的权重和系数，共同确定表头的宽度
			const exec = initExecute.call(this);
			const cnf = exec(_ProTable, [midder], {});
			const { colAttrs, headBias = 20, headRatio = 14, ...tableProps } = cnf;
			// proxy的变化带动table数据的更新
			const { table, proxy } = midder;
			// 指令的更新需要用到vue自己的响应式
			const loading = $reactive(ref(false), 1);
			// 以下定义用于列表数据的直接绑定
			const data = (table.datas = $reactive([], 2));
			const columns = (table.columns = $reactive([], 2));
			// ============================================================
			function slotRender(scope, render, isSeparate, notFnRender) {
				if (typeof render === 'function') {
					// 默认未分离渲染模式，可以在单元格内开辟空间，独立渲染
					// 分离模式的缺点是不一定能随着列表行数据的变化而更新
					return isSeparate ? {
						is: $jiess().JiessComponent,
						setup() { this.add(render.call(this, scope)) }
					} : render.call(this, scope);
				} else {
					// 无内容渲染，则渲染成中横线
					return exec(notFnRender, [midder]);
				}
			};
			// 观察到列表数据对象整体发生变化，对列表整体进行渲染并更新
			$watchEffect(() => setDatas(proxy.datas, data, primaryKey));
			$watchEffect(() => {
				const cols = proxy.columns.filter((item) => !item.hidden).map(item => {
					const {
						text,
						type,
						label,
						$slots,
						// 单元格渲染
						render,
						// 列表头部渲染
						renderHeader,
						// 单元格单独分离渲染
						renderSeparate = true,
						// 表头单独分离渲染
						renderHeaderSeparate = true,
						...attrs
					} = item;
					// 初步得到表头文案，用于计算最小尺寸
					const headerText = label || text;
					// 存在表头文字，且未设置最小宽度
					if (headerText && !attrs['min-width']) {
						// 表头文字数量 * 权重系数，得到默认最小宽度
						attrs['min-width'] = headerText.length * headRatio + headBias + 'px';
					}
					const config = {
						is: TableColumn,
						// 默认单行显示长内容带省略号
						// 'show-overflow-tooltip': true,
						$slots: {
							header(scope) {
								return slotRender.call(this, scope, renderHeader, renderHeaderSeparate, headerText);
							},
							...$slots
						},
						...exec(colAttrs, [midder, attrs], attrs)
					};
					// type为index|selection|expand
					if (type && typeof type === 'string') config.type = type;
					// expand渲染，走default插槽，因此走render通道
					if (!['index', 'selection'].includes(type)) {
						// 普通表头可以自定义渲染内容
						config.$slots.default = function(scope) {
							return slotRender.call(this, scope, render, renderSeparate, () => {
								// 无内容渲染，则渲染成中横线
								let text = scope.row[attrs.prop];
								if ([null, undefined, ''].includes(text)) text = emptyFill;
								return text;
							});
						}
					};
					return config;
				});
				setTimeout(() => columns.splice(0, Infinity, ...cols));
			});
			table.reload = () => update?.call(this, midder);
			table.setLoading = (boo) => (loading.value = boo);
			// ============================================================
			this.add({
				is: Table,
				'row-key': primaryKey,
				useDirectives: () => {
					return [
						[Loading.directive, loading.value]
					]
				},
				style: { width: '100%' },
				data: { $proxy: data, warn: false },
				children: { $proxy: columns, warn: false },
				ref: n => this.nextTick(() => table.frame = n),
				...tableProps,
				...table.tableProps
			});
		}
	};
};